import React,{Component} from 'react';
import {Row,Col,Table,Form,Input,Select, Button} from 'antd';
import './style.scss';

class DBApplication extends Component{

    formRef=React.createRef();
    componentDidMount(){
        this.props.onRef(this)
    }

    render(){
        const columnsLeft=[
            {
                title:'编码',
                key:'index',
                dataIndex:'index',
                width:60
            },
            {
                title:'中文名',
                key:'chineseName',
                dataIndex:'chineseName',
                width:100
            },
            {
                title:'英文名',
                key:'englishName',
                dataIndex:'englishName',
                width:100
            },
            {
                title:'关联映射',
                key:'associationMap',
                dataIndex:'associationMap',
                render:()=>{
                    return <Input placeholder='请输入表中文名称'/>
                }
            }
        ]
        const columnsRight=[
            {
                title:'编码',
                key:'index',
                dataIndex:'index',
                width:60
            },
            {
                title:'中文名',
                key:'chineseName',
                dataIndex:'chineseName',
                width:100
            },
            {
                title:'英文名',
                key:'englishName',
                dataIndex:'englishName',
                width:100
            },
        ]
        const dataSourceLeft=[
            {
                index:'1',
                englishName:'qwe',
                chineseName:'规划科',
            },
            {
                index:'2',
                englishName:'qwe',
                chineseName:'规划科',
            },
            {
                index:'3',
                englishName:'qwe',
                chineseName:'规划科',
            },
            {
                index:'4',
                englishName:'qwe',
                chineseName:'规划科',
            },
            {
                index:'5',
                englishName:'qwe',
                chineseName:'规划科',
            },
            {
                index:'6',
                englishName:'qwe',
                chineseName:'规划科',
            },
        ]
        const rules={required:true};
        const style={color:'rgb(0,126,220)'};
        return(
            <div className='dbApplication'>
                <p style={{fontSize:13,fontWeight:'bold',color:'#4ea6a6'}}>资源申请<span className='line'></span></p>
                <Form labelCol={{span:6}} wrapperCol={{span:12}} colon={false} ref={this.formRef}>
                    <Row>
                        <Col span={12}>
                            <Form.Item label={<span style={style}>任务名称</span>} rules={[rules]} name='taskName'>
                                <Input placeholder='请输入任务名称'/>
                            </Form.Item>
                            <Form.Item label={<span style={style}>资源名称</span>} >
                                <span className='dataSpan'>人口基本资源目录</span>
                            </Form.Item>
                            <Form.Item label={<span style={style}>提供方</span>}>
                                <span className='dataSpan'>公安局</span>
                            </Form.Item>
                            <Form.Item label={<span style={style}>发布表名称</span>}>
                                <span className='dataSpan'>test</span>
                            </Form.Item>
                            <Form.Item label={<span style={style}>需求方</span>}>
                                <span className='dataSpan'>交通局</span>
                            </Form.Item>
                        </Col>
                        <Col span={12}>
                            <Form.Item label={<span style={style}>接收节点</span>}  name='receivingNode'>
                                <Select defaultValue='TransportationBureau'>
                                    <Select.Option value='TransportationBureau'>交通局前置机</Select.Option>
                                </Select>
                            </Form.Item>
                            <Form.Item label={<span style={style}>接收库</span>}  name='receivingLibrary'>
                                <Select defaultValue='test'>
                                    <Select.Option value='test'>test</Select.Option>
                                </Select>
                            </Form.Item>
                            <Form.Item label={<span style={style}>接收表</span>}  name='receivingTable'>
                                <Select defaultValue='test'>
                                    <Select.Option value='test'>test</Select.Option>
                                </Select>
                            </Form.Item>
                            <Form.Item label={<span style={style}>开始时间</span>}  name='startTime'>
                                <Input placeholder='年/月/日'/>
                            </Form.Item>
                            <Form.Item label={<span style={style}>结束时间</span>}  name='endTime'>
                                <Input placeholder='年/月/日'/>
                            </Form.Item>
                        </Col>
                    </Row>
                    <Row>
                        <Col span={24}>
                            <Form.Item label={<span style={style}>描述</span>}  name='desc' wrapperCol={{span:18}} labelCol={{span:3}}>
                                <Input.TextArea />
                            </Form.Item>
                        </Col>
                    </Row>
                </Form>
                <p style={{fontSize:13,fontWeight:'bold',color:'#4ea6a6'}}>数据项关联映射<span className='line' style={{width:'86%'}}></span></p>
                <Row>
                    <Col span={16}>
                        <p style={{fontSize:13,fontWeight:'bold',color:'#4ea6a6',paddingLeft:20}}>资源目录数据项</p>
                        <Row>
                            <Col span={20}>
                                <Table
                                    columns={columnsLeft}
                                    dataSource={dataSourceLeft}
                                    pagination={false}
                                    scroll={{
                                        y:300
                                    }}
                                    bordered={true}
                                />
                            </Col>
                            <Col span={4}>
                                <Button type='primary' style={{marginLeft:10}}>一键匹配</Button>
                            </Col>
                        </Row>
                    </Col>
                    <Col span={8}>
                        <p style={{fontSize:13,fontWeight:'bold',color:'#4ea6a6'}}>目标接收数据项</p>
                        <Table
                            columns={columnsRight}
                            dataSource={dataSourceLeft}
                            pagination={false}
                            scroll={{
                                y:300
                            }}
                            bordered={true}
                        />
                    </Col>
                </Row>
            </div>
        )
    }
}
export default DBApplication;